<template>
  <view v-show="show" class="empty-data" :style="'top:' + top1">
    <view class="empty-data__img" :style="'width:' + imageWidth + ';height:' + imageHeight">
      <svg-icon icon-name="empty-data" style="width: 100%; height: 100%" />
    </view>
    <!-- <span class="empty-data__text">{{ text }}</span> -->
	<text class="empty-data__text">{{ text }}</text>
  </view>
</template>

<script>
  import SvgIcon from './svg-icon';

  export default {
    name: 'empty-data',
    components: { SvgIcon },
    props: {
      show: {
        type: Boolean,
        default: true
      },
      top1: {
        type: String,
        default: '40%'
      },
      imageWidth: {
        type: String,
        default: '160px'
      },
      imageHeight: {
        type: String,
        default: '120px'
      },
      text: {
        type: String,
        default: '暂无数据'
      },
      type: {
        type: String,
        default: 'data'
      }
    },
    install(Vue) {
      Vue.component(this.name, this);
    }
  };
</script>

<style lang="less">
  .empty-data {
    position: absolute;
    top: 40%;
    left: 50%;
    animation-name: empty-data-animate__fadeIn;
    animation-duration: 0.3s;

    /*animation-delay: 0.7s;*/
    animation-fill-mode: both;
  }

  @keyframes empty-data-animate__fadeIn {
    0% {
      opacity: 0;
      transform: translate(-50%, -40%);
    }

    100% {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }

  .empty-data__img {
    display: block;
    width: 160px;
    height: 120px;
    margin: 0 auto;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .empty-data__text {
    display: block;
    margin-top: 15px;
    font-size: 14px;
    text-align: center;
  }
</style>
